<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 999;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
  color: #347DE1
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-page-header__content {
  font-size: 14px;
}

.el-page-header__title {
  font-size: 14px;
}

.hex-form-inf-content-show {
  font-size: 14px;
  font-weight: 500;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: #F7F9FA;
  border: 1px solid #347DE1;
  border-radius: 8px;
}

::v-deep .el-drawer__header {
  font-size: 18px;
  color: #495060;
  font-weight: 700;
}
</style>

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="crud.optPageShow.listPage">
        <div slot="header" class="clearfix">
          <span>告警配置</span>
        </div>
        <div>
          <!--工具栏-->
          <div class="head-container">
            <crudOperation :permission="permission"/>
          </div>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" v-if="!this.addDialog" :data="crud.data" style="width: 100%;"
                    @select="crud.selectChange" @select-all="crud.selectAllChange" @row-dblclick="editClick"
                    @selection-change="crud.selectionChangeHandler"
                    @filter-change="crud.handleFilterChange"
                    :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
            <el-table-column type="selection"/>
            <el-table-column v-if="columns.visible('type')" prop="type" label="预警类型" :formatter="warnConfTypeFormatter"
                             :show-overflow-tooltip="true"
                             key="type"
                             min-width="50" :filters="[{ text: '指定任务执行结果通知', value: 'TASK_END' }, { text: '定期发送任务执行结果通知', value: 'TASK_RESULT' }, { text: '指定任务指定时间未完成预警', value: 'TASK_TIMER_NO' }
                             , { text: '今日任务失败数过多预警', value: 'TASK_FAIL' }, { text: '指定任务超时未完成预警', value: 'TASK_OVERTIME_NO' }, { text: '定时统计任务未完成数量预警', value: 'TASK_COUNT_NO' }
                            , { text: '任务异常超时未处理预警', value: 'TASK_ERROR' }, { text: '组内任务执行失败预警', value: 'LABEL_TASK_FAIL' }]"
                             filter-placement="bottom-end" :filter-multiple="false" column-key="type">
              <template slot-scope="scope">
                {{ formatterType(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('param9')" prop="param9" align="center" label="预警类型描述"/>
            <el-table-column v-if="columns.visible('isMailNotic')" align="center" :show-overflow-tooltip="true"
                             prop="isMailNotic"
                             label="是否邮件通知">
              <template slot-scope="scope">
                {{ formatterIsMailNotic(scope.row.isMailNotic) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('isSmsNotic')" align="center" prop="isSmsNotic" label="是否短信通知">
              <template slot-scope="scope">
                {{ formatterIsMailNotic(scope.row.isSmsNotic) }}
              </template>
            </el-table-column>
            <el-table-column v-if="columns.visible('warnStDate')" prop="warnStDate" :show-overflow-tooltip="true"
                             label="生效开始日期"/>
            <el-table-column v-if="columns.visible('warnEndDate')" prop="warnEndDate" :show-overflow-tooltip="true"
                             label="生效结束日期"/>
            <el-table-column v-if="columns.visible('upUser')" prop="upUser" label="修改人"/>
            <el-table-column v-if="columns.visible('upTs')" prop="upTs" :show-overflow-tooltip="true" label="更新时间"/>

          </el-table>
        </div>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 100px !important;" v-if="crud.optPageShow.addPage">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="crud.goBack">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content">告警配置编辑</div>
          </div>
        </div>
        <div class="dataFrom">
          <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="240px">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="预警类型描述" prop="param9">
                    <el-input type="textarea" :rows="1" v-model="form.param9" style="width: 400px;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      预警类型的描述
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="data_from_el-col">
                  <el-form-item label="预警类型" prop="type">
                    <el-select @change="selectChanged" v-model="form.type" filterable placeholder="请选择"
                               style="width: 400px;">
                      <el-option v-for="item in this.dict.app_warn_conf_type" :key="item.value" :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">通过系统类型的不同来区分不同的监控点</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type=='LABEL_TASK_FAIL'">
                <el-col :span="12">
                  <el-form-item label="分组标签" prop="labelCode">
                    <el-select style="width: 400px" v-model="form.labelCode" placeholder="请选择">
                      <el-option
                        v-for="item in labelList"
                        :key="item.labelCode"
                        :label="item.labelName"
                        :value="item.labelCode">
                        <span style="float: left">{{ item.labelCode }} | {{ item.labelCode }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                            item.labelLevel == '1' ? '系统级' : '平台级'
                          }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      标签
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否邮件通知" prop="isMailNotic">
                    <el-switch @change="checkNotic" v-model="form.isMailNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择邮件通知，则监控到异常后，系统会自动向通知对象发送相关异常邮件</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否短信通知" prop="isSmsNotic">
                    <el-switch @change="checkNotic" v-model="form.isSmsNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择短信通知，则监控到异常后，系统会自动向通知对象发送相关异常短信</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否微信通知" prop="isWeChatNotic">
                    <el-switch @change="checkNotic" v-model="form.isWeChatNotic" active-value="1" inactive-value="2"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">是否微信通知</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item style="padding-right: 20%" label="是否限定生效周期" prop="isValidDate">
                    <el-switch v-model="form.isValidDate" active-value="1" inactive-value="2">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">是否限定生效时间范围</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isValidDate==1">
                <el-col :span="12">
                  <el-form-item style="padding-right: 20%" label="日期区间" prop="startEndDate">
                    <el-date-picker v-model="form.startEndDate" type="daterange" @change="changeDate(form.startEndDate)"
                                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format=" yyyy-MM-dd"
                                    align="right">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">生效时间范围</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'TASK_END' || form.type == 'TASK_TIMER_NO' || form.type == 'TASK_OVERTIME_NO'">
                <el-col :span="12">
                  <el-form-item label="监控对象" prop="isRegionAll">
                    <el-radio-group v-model="form.isRegionAll" @change="radioChanged">
                      <el-radio v-model="form.isRegionAll" label="2">周期任务</el-radio>
                      <el-radio v-model="form.isRegionAll" label="3">定时任务</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">该监控对象是针对Agent的，可以选择统一监控配置或部分Agent</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isRegionAll == 2">
                <el-col :span="12">
                  <el-form-item label="周期任务列表" prop="regionJsonList">
                    <el-select v-model="form.regionJsonList" multiple :filterable="true" placeholder="请点击更多"
                               style="width: 400px">

                    </el-select>
                    <el-button @click="moreCycleDepend()" type="primary" style="margin-left: 10px;">
                      更多
                    </el-button>
                  </el-form-item>

                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择要监控的周期任务</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isRegionAll == 3">
                <el-col :span="12">
                  <el-form-item label="定时任务列表" prop="regionJsonList">
                    <el-select v-model="form.regionJsonList" multiple :filterable="true" placeholder="请选择"
                               style="width: 400px">
                    </el-select>
                    <el-button @click="moreCronDepend()" type="primary" style="margin-left: 10px;">
                      更多
                    </el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">选择要监控的周期任务。</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row
                v-if="form.type == 'TASK_TIMER_NO' || form.type == 'TASK_COUNT_NO' || form.type == 'TASK_ERROR' || form.type == 'TASK_FAIL'">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="指定时间点" prop="param1">
                    <el-time-select v-model="form.param1"
                                    :picker-options="{ start: '00:00',step: '00:10', end: '23:50' }">
                    </el-time-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      系统在指定时间点发送监控任务未完成的异常信息
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'TASK_COUNT_NO' || form.type == 'TASK_FAIL'">
                <el-col :span="12">
                  <el-form-item label="周期任务数量">
                    <el-input-number v-model="form.param2" :min="0" style="width: 260px"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当周期任务失败数量超过设定的阀值时，系统会自动通知管理员</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'TASK_FAIL'">
                <el-col :span="12">
                  <el-form-item label="定时任务数量">
                    <el-input-number v-model="form.param3" :min="0" style="width: 260px"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">当定时任务失败数量超过设定的阀值时，系统会自动通知管理员</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'TASK_RESULT'">
                <el-col :span="12">
                  <el-form-item label="指定汇总时间点">
                    <el-time-select v-model="form.param1"
                                    :picker-options="{ start: '00:00',step: '00:10', end: '23:50' }">
                    </el-time-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">系统自动向管理员发送汇总时间段内周期作业及任务和定时任务完成情况</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.type == 'TASK_ERROR'">
                <el-col :span="12">
                  <el-form-item label="超时时长（h）">
                    <el-input-number v-model="form.param2" :min="0"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">允许任务超时最大时长</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="通知对象" prop="informObj">
                    <el-checkbox v-model="form.isToApp" false-label="false" true-label="true"
                                 label="应用管理员"></el-checkbox>
                    <el-checkbox v-model="form.param5" false-label="false" true-label="true"
                                 label="运维管理员"></el-checkbox>
                    <el-checkbox v-model="form.param6" false-label="false" true-label="true"
                                 label="监控管理员"></el-checkbox>
                    <el-checkbox v-model="form.isToPerson" false-label="false" true-label="true"
                                 label="自定义"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">异常信息接收者。</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="form.isToPerson === 'true'">
                <el-col :span="12">
                  <el-form-item label="人员列表" prop="toUserList">
                    <el-select v-model="form.toUserList" multiple :filterable="true" placeholder="请选择"
                               style="width: 400px">
                      <el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">可以自定义选择某些人员进行异常接收。</div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <div class="form-operator-button" style="padding-right: 2%">
                <el-button :loading="loadStatus" v-bind:disabled="!this.isSubmit" type="primary"
                           @click.native="toSubmit">保存
                </el-button>
                <el-button @click="crud.goBack">返回</el-button>
              </div>
            </div>
          </el-form>
        </div>
      </el-card>
      <el-drawer :visible.sync="cycleDrawer" title="周期任务选择" direction="rtl" :before-close="handleClose" size="1200px">
        <cycleTaskDetail v-if="cycleDrawer" ref="cycleTaskDetail" v-bind:taskDependData="taskDependData"
                         v-on:taskmessage="showTaskMessage"/>
      </el-drawer>
      <el-drawer :visible.sync="cronDrawer" title="定时任务选择" direction="rtl" :before-close="handleClose" size="1200px">
        <cronTaskDetail v-if="cronDrawer" ref="cronTaskDetail" v-bind:taskDependData="taskDependData"
                        v-on:taskmessage="showTaskMessage"/>
      </el-drawer>
    </div>
    <WarnConfInf v-if="showDetail" :pkId="pkId" ref="WarnConfInf" :goBack="goBack"
                 style="margin-left: 30px;margin-top: -10px;"/>
  </div>
</template>
<script>
import warnConfApi from '@/api/alarm/warnConf'
import jobDef from '@/api/cycleJob/job_def'
import task from '@/api/cycleJob/task'
import cronTaskDefApi from '@/api/cronTask/cronTaskDef'
import labelInfoApi from '@/api/label/labelInfo'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/warnConf/app/CRUD.operation'
import cycleTaskDetail from './cycleTaskDetail'
import cronTaskDetail from './cronTaskDetail'
import WarnConfInf from './warnConfDetail'


const queryList = [{
  'cloumValue': 'param9',
  'cloumName': '预警类型描述'
}]
const defaultCrud = CRUD({
  title: '告警配置',
  url: '/api/warnConf/appSelectPages',
  queryList: queryList,
  crudMethod: {
    ...warnConfApi
  }
})
const defaultForm = {
  informObj: [],
  pkId: null,
  appCode: null,
  type: null,
  isMailNotic: '2',
  isSmsNotic: '2',
  isWeChatNotic: '1',
  isRegionAll: null,
  isToSys: false,
  isToApp: true,
  toJson: null,
  regionJson: null,
  isValidDate: null,
  startEndDate: null,
  param1: null,
  param2: null,
  param3: null,
  param4: null,
  param5: false,
  param6: false,
  param7: null,
  param8: null,
  param9: null,
  isToPerson: null,
  regionJsonList: [],
  toUserList: []
}
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        );
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  name: 'appWarnConf',
  components: {
    crudOperation,
    cycleTaskDetail,
    cronTaskDetail,
    WarnConfInf
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['app_warn_conf_type'],
  data() {
    var validateParam = (rule, value, callback) => {
      if (rule.field === 'param9') {
        if (value.split(" ").join("").length == 0) {
          callback(new Error("预警类型描述不能为空字符串！"));
        } else {
          callback()
        }
      }
    }
    var validateInformObj = (rule, value, callback) => {
      if (JSON.parse(this.form.isToApp) === false && JSON.parse(this.form.param5) === false && JSON.parse(this.form.param6) === false && JSON.parse(this.form.isToPerson) === false) {
        callback(new Error('请至少选择一项通知对象!'));
      } else {
        callback();
      }
    }
    return {
      isToPerson: true,
      labelList: [],
      cycleDrawer: false,
      cronDrawer: false,
      taskDependData: [],
      taskDependObject: [],
      taskQuery: [],
      taskData: [],
      taskTotal: 0,
      taskPage: 0,
      taskNameAndTaskCode: "",
      cronQuery: [],
      cronData: [],
      cronTotal: 0,
      cronPage: 0,
      cronTaskNameOrCode: "",
      permission: {
        add: ['appWarnConf:add'],
        edit: ['appWarnConf:edit'],
        del: ['appWarnConf:del']
      },
      rules: {
        isRegionAll: [
          {
            required: true,
            message: '请选择监控对象',
            trigger: 'change'
          }
        ],
        startEndDate: [
          {
            required: true,
            message: '请选择日期区间',
            trigger: 'change'
          }
        ],
        regionJsonList: [
          {
            required: true,
            message: '请选择任务列表',
            trigger: 'change'
          }
        ],
        toUserList: [
          {
            required: true,
            message: '请选择人员列表',
            trigger: 'change'
          }
        ],
        param9: [{
          required: true,
          message: '请输入预警类型描述',
          trigger: 'blur'
        },
          {
            validator: validateParam,
            trigger: 'blur'
          },
        ],
        type: [{
          required: true,
          message: '请选择预警类型',
          trigger: 'change'
        },],
        labelCode: [{
          required: true,
          message: '请选择标签',
          trigger: 'change'
        },],
        informObj: [{
          required: true,
          validator: validateInformObj,
          trigger: 'change'
        }]
      },
      loadStatus: false,
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      checkAll: true,
      isIndeterminate: true,
      showQryParamFlag: false,
      addDialog: false,
      jobList: [],
      taskList: [],
      cronTaskList: [],
      userList: [],
      show: false,
      isSubmit: true,
      formData: { //下拉参数
        pageIndex: 1,
        pageSize: 20
      },
      allTaskList: [],
      cronAllTaskList: [],
      showDetail: false,
    }
  },
  computed: {},
  created() {
    this.crud.optPageShow.listPage = true;
    this.crud.optPageShow.addPage = false;
    this.getList();
  },
  methods: {
    getList() {
      labelInfoApi.queryList().then(res => {
        this.labelList = JSON.parse(JSON.stringify(res))
      })
    },
    moreCycleDepend() {
      this.taskDependData = []
      this.taskDependObject.forEach(item => {
        this.taskDependData.push({'taskCode': item.taskCode, 'taskName': item.taskName})
      });
      this.cycleDrawer = true;
    },
    moreCronDepend() {
      this.taskDependData = []
      this.taskDependObject.forEach(item => {
        this.taskDependData.push({'taskCode': item.taskCode, 'taskName': item.taskName})
      });
      this.cronDrawer = true;
    },
    showTaskMessage: function (data) {
      this.form.regionJsonList = [];
      this.cycleDrawer = false;
      this.cronDrawer = false;
      this.taskDependObject = [];
      if (data != null) {
        data.forEach((item, i) => {
          this.taskDependObject.push(item)
          if (!this.isInArray(this.form.regionJsonList, item.taskCode)) {
            this.form.regionJsonList.push(item.taskCode);
          }
        })
      }
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    handleClose(done) {
      this.$confirm('还没确认选择，确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    [CRUD.HOOK.beforeToAdd](crud) {
      this.$set(crud.form, 'warnStData', null);
      this.$set(crud.form, 'warnEndData', null);
      this.$set(crud.form, 'startEndDate', null);
      this.initData();
      this.getTasks(this.formData);
      this.getCronTasks(this.formData);
    },
    // 编辑应用前
    [CRUD.HOOK.beforeToEdit](crud) {
      this.showDate(crud);
      this.initData();
      this.getEditWarnConf(crud.form.pkId);
      this.getTasks(this.formData);
      this.getCronTasks(this.formData);
    },
    showDate(crud) {
      let arrayObj = new Array();
      if (crud.form.warnStDate != null) {
        arrayObj.push(new Date(crud.form.warnStDate), new Date(crud.form.warnEndDate));
      }
      this.$set(crud.form, 'startEndDate', arrayObj);
    },
    initData() {
      this.initTaskList();
      this.initCronTaskList();
      this.initUserList();
    },
    editClick(row, column, event) {
      this.showDetail = true;
      this.crud.optPageShow.listPage = false;
      this.pkId = row.pkId;
    },
    goBack() {
      this.crud.optPageShow.listPage = true;
      this.showDetail = false;
      this.crud.refresh();
    },
    toSubmit() {
      let pkId = this.form.pkId;
      if (pkId != null && pkId != '') {
        this.edit();
      } else {
        this.add();
      }
    },
    edit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadStatus = true;
          warnConfApi.edit(this.form).then(res => {
            if (res) {
              this.loadStatus = false;
              this.crud.resetForm();
              this.crud.optPageShow.listPage = true;
              this.crud.optPageShow.addPage = false;
              this.crud.status.edit = CRUD.STATUS.NORMAL;
              this.crud.refresh();
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '修改失败',
                message: '修改失败',
                type: 'warning'
              });
            }
          })
        }
      })
    },
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadStatus = true;
          warnConfApi.addAppWarnConf(this.form).then(res => {
            if (res) {
              this.loadStatus = false;
              this.crud.resetForm();
              this.crud.optPageShow.listPage = true;
              this.crud.optPageShow.addPage = false;
              this.crud.status.add = CRUD.STATUS.NORMAL;
              this.crud.refresh();
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '添加失败',
                message: '添加失败',
                type: 'warning'
              });
            }
          }).catch(() => {
            this.loadStatus = false
          })
        }
      })
    },
    radioChanged() {
      this.form.regionJsonList = [];
      this.taskDependObject = []
    },
    selectChanged() {
      this.form.isRegionAll = null;
    },
    formatterIsMailNotic(val) {
      if (val == '1') {
        return '是'
      } else {
        return '否'
      }
    },
    warnConfTypeFormatter(row, column) {
      return this.dict.label.app_warn_conf_type[row.type]
    },
    formatterType(val) {
      return this.dict.label.app_warn_conf_type[val]
    },

    initJobList() {
      jobDef.getJobListByCurrentApp().then(res => {
        this.jobList = res;
      })
    },
    initTaskList() {
      task.getTaskListByCurrentApp().then(res => {
        this.allTaskList = res;
      })
    },
    initCronTaskList() {
      let param = {size: 10000000}
      cronTaskDefApi.queryListByPage(param).then(res => {
        this.cronTaskList = res;
      })
    },
    initUserList() {
      warnConfApi.getUserList().then(res => {
        this.userList = res;
      })
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(value) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    getEditWarnConf(pkId) {
      warnConfApi.getEditWarnConf(pkId).then(res => {
        this.form.regionJsonList = res.regionJsonList;
        this.form.toUserList = res.toUserList;
        this.form.isToSys = res.isToSys;
        this.form.isToApp = res.isToApp;
        this.form.param5 = res.param5;
        if (this.form.param5 == 'true') {
          this.form.param5 = true;
        } else {
          this.form.param5 = false;
        }
        this.form.param6 = res.param6;
        if (this.form.param6 == 'true') {
          this.form.param6 = true;
        } else {
          this.form.param6 = false;
        }
        if (this.form.isToApp == 'true') {
          this.form.isToApp = true;
        } else {
          this.form.isToApp = false;
        }
        this.form.isToPerson = false
        if (this.form.toUserList !== null) {
          this.form.isToPerson = true
        }
      })
    },
    checkNotic() {
      if (this.form.isMailNotic == "2" && this.form.isSmsNotic == "2" && this.form.isWeChatNotic == "2") {
        this.crud.notify('请至少选择一项通知方式', CRUD.NOTIFICATION_TYPE.WARNING)
        this.isSubmit = false
        return
      } else {
        this.isSubmit = true
      }
    },
    loadmore() {
      this.formData.pageIndex++;
      this.getTasks(this.formData);
    },
    getTasks(v) {
      let num = v.pageIndex * v.pageSize;
      this.taskList = this.allTaskList.filter((item, index, arr) => {
        return index < num;
      });
    },
    cronLoadmore() {
      this.formData.pageIndex++;
      this.getCronTasks(this.formData);
    },
    getCronTasks(v) {
      let num = v.pageIndex * v.pageSize;
      this.cronTaskList = this.cronAllTaskList.filter((item, index, arr) => {
        return index < num;
      });
    },
  }
}
</script>
